<template>
  <div>
    <h2>父组件</h2>
    <p>父组件中的 isExpanded: {{ isExpanded }}</p>

    <childcomponent :is-expanded.sync="isExpanded" />
    <!-- .sync修饰符提供了简洁的方式来双向绑定父子组件之间的prop，他允许子组件在需要的时候修改父组件传递的props,并且同步回去父组件
    在这个地方意思是：让子组件绑定父组件里面的属性isExpanded，点击子组件，子组件改变isExpanded属性值，并且父组件里面的isExpanded也随之改变
    -->
  </div>
</template>

<script>
import childcomponent from './ChildComponents.vue'
export default {
  name: 'sync',
  components: {
    childcomponent
  },
  data() {
    return {
      isExpanded: false
    }
  }
}
</script>

<style lang="scss" scoped></style>
